import {
  Box,
  Text,
  Divider,
  Flex,
  Button,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
} from "@chakra-ui/react";
import { useContext, useEffect, useState } from "react";
import { MainContext } from "@/src/providers/MainProvider";
import CreateConfig from "../Profile/CreateConfig";
import Configs from "../Profile/Configs";
import { useTranslation } from "@/src/i18n";
import { getMouseProductName } from "@/src/utils";
import { getMouseModel } from "@/src/config/mouseModels";

const LeftSideBar = () => {
  const { profile, deviceName, deviceId } = useContext(MainContext);
  const [mouseName, setMouseName] = useState<string>("G3 A");
  const [isOpen, setIsOpen] = useState(false); // 控制弹窗显示

  // 初始化配置文件
  useEffect(() => {
    if (profile.profiles.length == 0 && deviceId) {
      profile.initProfiles(deviceId, undefined);
    }
  }, [profile, deviceId]);

  useEffect(() => {
    if (typeof deviceName === "string") {
      const mouseModel = getMouseModel(deviceName);
      setMouseName(mouseModel.displayName);
    } else {
      setMouseName(getMouseProductName(deviceName));
    }
  }, [deviceName]);

  // 打开使用说明
  const openUserGuide = () => {
    setIsOpen(true);
  };

  // 关闭弹窗
  const onClose = () => {
    setIsOpen(false);
  };
  const { t } = useTranslation("");
  let lang = null;
  if (typeof window !== "undefined") {
    lang = window.localStorage.getItem("lang");
  }
  return (
    <>
      <Box
        className="relative flex flex-col"
        width="250px"
        height="calc(100vh - 60px)"
        minHeight="708px"
        bg="#211a31"
        borderRight="1px"
        borderColor="#aaaaaa"
        borderStyle="solid"
      >
        {/* 设备状态栏 */}
        <Flex height="60px" alignItems="center" px="25px">
          <Box width="8px" height="8px" bg="#33c169" borderRadius="full" />
          <Text ml="8px" fontSize="20px" fontWeight="bold" color="white">
            {mouseName}
          </Text>
          {/* <Box>
            <Box
              className="mx-5 p-1 font-family-msyh !text-[12px] cursor-pointer bg-red-100 !text-[#E26735] font-bold rounded-md"
              onClick={openUserGuide}
              sx={{
                color: "#E26735",
                backgroundColor: "rgba(226, 103, 53, 0.2)",
                marginLeft: "8px",
                padding: "4px",
                borderRadius: "4px",
              }}
            >
              {t("instructionsBtn")}
            </Box>
          </Box> */}
        </Flex>

        {/* 分隔线 */}
        <Divider
          borderColor="#aaaaaa"
          width="200px"
          borderStyle="solid"
          className="mx-auto"
        />

        {/* 配置区域 */}
        <Box px={6} className="flex justify-between my-[14px]">
          <CreateConfig />
        </Box>

        {/* 配置列表 */}
        <Configs />
      </Box>

      {/* PDF 查看弹窗 */}
      <Modal isOpen={isOpen} onClose={onClose} size="6xl">
        <ModalOverlay />
        <ModalContent maxW="80vw" h="80vh" maxH="80vh">
          <ModalHeader>{t("instructions")}</ModalHeader>
          <ModalCloseButton />
          {/* <ModalBody p={0}>
            <iframe
              src={
                lang === "zh_CN"
                  ? `/gmouse/pdf/${mouseName}_User_Guide.pdf#toolbar=0`
                  : `/gmouse/pdf/${mouseName}_User_Guide_en.pdf#toolbar=0`
              }
              width="100%"
              height="100%"
              style={{ border: "none" }}
            />
          </ModalBody> */}
        </ModalContent>
      </Modal>
    </>
  );
};

export default LeftSideBar;
